<script src="@/js/paipan/bazi.js"></script>


<template>
  <div class="vue">
    <div class="margins">

      <div class="nodata" v-show="!isData">

        <video ref="videoRef" autoplay loop :muted="true">
          <source src="@/assets/img/paipan/loading.mp4" type="video/mp4">
        </video>

        <div class="option">

          <div class="paipan">
            <Button type="primary" class="button" @click="paiPanMethod">八字 - 开始排盘</Button>
          </div>

          <div class="xy">
            <div class="name">
              <Input size="small" v-model="options.name" placeholder="请输入姓名" maxlength="20" show-word-limit />
            </div>
            <div class="occupy">
              <Input size="small" v-model="options.occupy" placeholder="请输入占事" maxlength="20" show-word-limit />
            </div>
            <div class="date">
              <el-date-picker size="small" :clearable="false" v-model="options.date" type="datetime"
                format="YYYY-MM-DD HH:mm:ss" placeholder="请选择日期" :editable="false" style="width:170px;" />
              <div class="leapmonth">
                <el-radio-group size="small" v-model="options.leapMonth" v-for="item in leapMonthOptions" :key="item">
                  <el-radio-button :label="item.label" :value="item.value" />
                </el-radio-group>
              </div>
            </div>
            <div class="datetype">
              <el-radio-group size="small" v-model="options.dateType" v-for="item in dateTypeOptions" :key="item">
                <el-radio-button :label="item.label" :value="item.value" />
              </el-radio-group>
              <div class="sex">
                <el-radio-group size="small" v-model="options.sex" v-for="item in sexOptions" :key="item">
                  <el-radio-button :label="item.label" :value="item.value" />
                </el-radio-group>
              </div>
            </div>
            <div class="other">
              <span class="title">起运流派</span>
              <Select size="small" v-model="options.qiYunLiuPai" class="select">
                <Option v-for="item in qiYunLiuPaiOptions" :key="item" :label="item.label" :value="item.value">
                  {{ item.label }}
                </Option>
              </Select>
            </div>
            <div class="other">
              <span class="title">节气排法</span>
              <Select size="small" v-model="options.jieQiSet" class="select">
                <Option v-for="item in jieQiSetOptions" :key="item" :label="item.label" :value="item.value">
                  {{ item.label }}
                </Option>
              </Select>
            </div>
            <div class="other">
              <span class="title">人元司令</span>
              <Select size="small" v-model="options.renYuanType" class="select">
                <Option v-for="item in renYuanTypeOptions" :key="item" :label="item.label" :value="item.value">
                  {{ item.label }}
                </Option>
              </Select>
            </div>
            <div class="other">
              <span class="title">年柱排法</span>
              <Select size="small" v-model="options.yearGanZhiSet" class="select">
                <Option v-for="item in yearGanZhiSetOptions" :key="item" :label="item.label" :value="item.value">
                  {{ item.label }}
                </Option>
              </Select>
            </div>
            <div class="other">
              <span class="title">月柱排法</span>
              <Select size="small" v-model="options.monthGanZhiSet" class="select">
                <Option v-for="item in monthGanZhiSetOptions" :key="item" :label="item.label" :value="item.value">
                  {{ item.label }}
                </Option>
              </Select>
            </div>
            <div class="other">
              <span class="title">日柱排法</span>
              <Select size="small" v-model="options.dayGanZhiSet" class="select">
                <Option v-for="item in dayGanZhiSetOptions" :key="item" :label="item.label" :value="item.value">
                  {{ item.label }}
                </Option>
              </Select>
            </div>
            <div class="other">
              <span class="title">时柱排法</span>
              <Select size="small" v-model="options.hourGanZhiSet" class="select">
                <Option v-for="item in hourGanZhiSetOptions" :key="item" :label="item.label" :value="item.value">
                  {{ item.label }}
                </Option>
              </Select>
            </div>
          </div>

        </div>

      </div>

      <div class="yesdata" v-if="isData">

        <div class="option">
          <Button type="primary" class="button" @click="fanHuiPaiPanMethod">返回排盘</Button>
          <div class="float-right">
            <el-switch v-model="ganZhiYinYang" inline-prompt style="--el-switch-on-color:#2d8cf0;" active-text="阴干支斜体开启"
              inactive-text="阴干支斜体关闭" />
            <Button type="success" class="button2" @click="jiChuMethod">
              <b v-if="dataPage === 1">基础信息</b>
              <span v-else>基础信息</span>
            </Button>
            <Button type="success" class="button2" @click="mingPanMethod">
              <b v-if="dataPage === 2">命盘信息</b>
              <span v-else>命盘信息</span>
            </Button>
            <Button type="success" class="button2" @click="gengDuoMethod">
              <b v-if="dataPage === 3">更多信息</b>
              <span v-else>更多信息</span>
            </Button>
          </div>
        </div>

        <div class="data">

          <div class="hrader">
            <div class="name">
              <Ellipsis :text="data.name" :length="3" tooltip />
            </div>
            <div class="date">
              <span class="other">（{{ data.sex + '、' + data.zao }}）</span>
              <span class="item">公历{{ data.solarStr }}</span>
              <span class="item">农历{{ data.lunarStr }}</span>
              <span class="item">{{ data.week }}</span>
              <span class="item">{{ data.season }}</span>
              <span class="item" v-if="'' !== data.wuBuYuShi">
                <Tag color="error">{{ data.wuBuYuShi }}</Tag>
              </span>
            </div>
            <div class="shengxiao">
              {{ data.shengXiao }}
            </div>
          </div>

          <div class="border">

            <div class="jichu" v-if="dataPage === 1">

              <div class="go bgi1">
                <div class="item">
                  <div class="title">年命信息</div>
                  <div class="content">{{ data.yearGanZhiNaYin }}命</div>
                </div>
                <div class="item">
                  <div class="title">命卦信息</div>
                  <div class="content">{{ data.mingGua }}</div>
                </div>
                <div class="item">
                  <div class="title">生肖星座</div>
                  <div class="content">{{ data.shengXiao + '、' + data.xingZuo }}</div>
                </div>
                <div class="item">
                  <div class="title">星宿信息</div>
                  <div class="content">{{ data.xingXiu + '（' + data.xiuJiXiong + '）' }}</div>
                </div>
              </div>

              <div class="go bgi2">
                <div class="item">
                  <div class="title">日主属性</div>
                  <div class="content">{{ data.dayGan + data.dayGanWuXing }}</div>
                </div>
                <div class="item">
                  <div class="title">身体强弱</div>
                  <div class="content">{{ data.shenTiQiangRuo }}</div>
                </div>
                <div class="item">
                  <div class="title">胎元胎息</div>
                  <div class="content">{{ data.taiYuan + '、' + data.taiXi }}</div>
                </div>
                <div class="item">
                  <div class="title">命宫身宫</div>
                  <div class="content">{{ data.mingGong + '、' + data.shenGong }}</div>
                </div>
              </div>

              <div class="go bgi1">
                <div class="item">
                  <div class="title">生辰八字</div>
                  <div class="content" v-if="data.baZi">
                    {{ data.baZi.join(' ') }}
                  </div>
                </div>
                <div class="item">
                  <div class="title">八字五行</div>
                  <div class="content" v-if="data.baZiWuXing">
                    {{ data.baZiWuXing.join(' ') }}
                  </div>
                </div>
                <div class="item">
                  <div class="title">八字空亡</div>
                  <div class="content" v-if="data.baZiKongWang">
                    {{ data.baZiKongWang.join(' ') }}
                  </div>
                </div>
                <div class="item">
                  <div class="title">八字纳音</div>
                  <div class="content" v-if="data.baZiNaYin">
                    {{ data.baZiNaYin.join(' ') }}
                  </div>
                </div>
              </div>

              <div class="go bgi2">
                <div class="item">
                  <div class="title">五行缺失</div>
                  <div class="content" v-if="data.wuXingQueShi">
                    {{ data.wuXingQueShi.join('、') }}
                  </div>
                </div>
                <div class="item">
                  <div class="title">人元司令</div>
                  <div class="content">{{ data.renYuan }}</div>
                </div>
                <div class="item">
                  <div class="title">月将月相</div>
                  <div class="content">{{ data.yueJiang + '、' + data.yueXiang }}</div>
                </div>
                <div class="item">
                  <div class="title">月将神</div>&nbsp;&nbsp;&nbsp;&nbsp;
                  <div class="content">{{ data.yueJiangShen }}</div>
                </div>
              </div>

              <div class="go bgi1">
                <div class="item">
                  <div class="title">{{ data.prevJie }}日期</div>
                  <div class="content">{{ data.prevJieDateStr }}</div>
                </div>
                <div class="item">
                  <div class="title">{{ data.nextJie }}日期</div>
                  <div class="content">{{ data.nextJieDateStr }}</div>
                </div>
                <div class="item">
                  <div class="title">喜用神</div>&nbsp;&nbsp;&nbsp;&nbsp;
                  <div class="content" v-if="data.xiYongShen">
                    {{ data.xiYongShen.join('、') }}
                  </div>
                </div>
                <div class="item">
                  <div class="title">喜用神位</div>
                  <div class="content" v-if="data.xiYongShenFangWei">
                    <Ellipsis :text="data.xiYongShenFangWei.join('、')" :length="10" tooltip />
                  </div>
                </div>
              </div>

              <div class="go bgi2">
                <div class="item">
                  <div class="title">起运日期</div>
                  <div class="content">{{ data.qiYunDateStr }}</div>
                </div>
                <div class="item">
                  <div class="title">起运信息</div>
                  <div class="content">
                    <Ellipsis :text="data.qiYun" :length="15" tooltip />
                  </div>
                </div>
                <div class="item">
                  <div class="title">出生节气</div>
                  <div class="content">
                    <Ellipsis :text="data.birthSolarTerms" :length="15" tooltip />
                  </div>
                </div>
                <div class="item">
                  <div class="title"></div>
                  <div class="content"></div>
                </div>
              </div>

              <div class="go bgi3">
                <div class="item" v-for="index in data.wuXingWangShuai.length" :key="index">
                  <div class="content">
                    <span v-html="wuXingGaoLiangMethod2(data.wuXingWangShuai[index - 1])"></span>
                  </div>
                </div>
              </div>

              <div class="wuxinghsu">
                <div class="progress">
                  <Progress :percent="muCount * 10" :stroke-width="20" :stroke-color="muColor">
                    <span class="count">木{{ muCount }}个</span>
                  </Progress>
                </div>
                <div class="progress">
                  <Progress :percent="huoCount * 10" :stroke-width="20" :stroke-color="huoColor">
                    <span class="count">火{{ huoCount }}个</span>
                  </Progress>
                </div>
                <div class="progress">
                  <Progress :percent="tuCount * 10" :stroke-width="20" :stroke-color="tuColor">
                    <span class="count">土{{ tuCount }}个</span>
                  </Progress>
                </div>
                <div class="progress">
                  <Progress :percent="jinCount * 10" :stroke-width="20" :stroke-color="jinColor">
                    <span class="count">金{{ jinCount }}个</span>
                  </Progress>
                </div>
                <div class="progress">
                  <Progress :percent="shuiCount * 10" :stroke-width="20" :stroke-color="shuiColor">
                    <span class="count">水{{ shuiCount }}个</span>
                  </Progress>
                </div>
              </div>

              <div class="caihua">
                <el-tabs v-model="caiHuaTab" type="card" stretch="true">
                  <el-tab-pane label="正财年" name="1">
                    <div v-if="data.zhengCaiYun && data.zhengCaiYun.length" class="tab">
                      <span v-for="index in data.zhengCaiYun.length" :key="index">
                        <div class="jianju">
                          <span
                            v-html="ganZhiGaoLiangMethod(data.zhengCaiYun[index - 1][2].substring(0, 1))"></span><span
                            v-html="ganZhiGaoLiangMethod(data.zhengCaiYun[index - 1][2].substring(1, 2))"></span>年
                          ({{ data.zhengCaiYun[index - 1][0] }}年 / {{ data.zhengCaiYun[index - 1][1] }}岁)
                          <span v-if="'' !== data.zhengCaiYun[index - 1][3]">
                            <el-tooltip placement="top" :enterable="false">
                              <template #content>
                                {{ data.zhengCaiYun[index - 1][3].split('_')[1] }}，正财运可能不会过于理想
                              </template>
                              <Tag class="tag" color="warning">
                                {{ data.zhengCaiYun[index - 1][3].split('_')[0] }}
                              </Tag>
                            </el-tooltip>
                          </span>
                        </div>
                      </span>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="偏财年" name="2">
                    <div v-if="data.pianCaiYun && data.pianCaiYun.length" class="tab">
                      <span v-for="index in data.pianCaiYun.length" :key="index">
                        <div class="jianju">
                          <span
                            v-html="ganZhiGaoLiangMethod(data.pianCaiYun[index - 1][2].substring(0, 1))"></span><span
                            v-html="ganZhiGaoLiangMethod(data.pianCaiYun[index - 1][2].substring(1, 2))"></span>年
                          ({{ data.pianCaiYun[index - 1][0] }}年 / {{ data.pianCaiYun[index - 1][1] }}岁)
                          <span v-if="'' !== data.pianCaiYun[index - 1][3]">
                            <el-tooltip placement="top" :enterable="false">
                              <template #content>
                                {{ data.pianCaiYun[index - 1][3].split('_')[1] }}，偏财运可能不会过于理想
                              </template>
                              <Tag class="tag" color="warning">
                                {{ data.pianCaiYun[index - 1][3].split('_')[0] }}
                              </Tag>
                            </el-tooltip>
                          </span>
                        </div>
                      </span>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="正桃花年" name="3">
                    <div v-if="data.zhengTaoHua && data.zhengTaoHua.length" class="tab">
                      <span v-for="index in data.zhengTaoHua.length" :key="index">
                        <div class="jianju">
                          <span
                            v-html="ganZhiGaoLiangMethod(data.zhengTaoHua[index - 1][2].substring(0, 1))"></span><span
                            v-html="ganZhiGaoLiangMethod(data.zhengTaoHua[index - 1][2].substring(1, 2))"></span>年
                          ({{ data.zhengTaoHua[index - 1][0] }}年 / {{ data.zhengTaoHua[index - 1][1] }}岁)
                          <span v-if="'' !== data.zhengTaoHua[index - 1][3]">
                            <el-tooltip placement="top" :enterable="false">
                              <template #content>
                                {{ data.zhengTaoHua[index - 1][3].split('_')[1] }}，正桃花运可能不会过于理想
                              </template>
                              <Tag class="tag" color="warning">
                                {{ data.zhengTaoHua[index - 1][3].split('_')[0] }}
                              </Tag>
                            </el-tooltip>
                          </span>
                        </div>
                      </span>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="偏桃花年" name="4">
                    <div v-if="data.pianTaoHua && data.pianTaoHua.length" class="tab">
                      <span v-for="index in data.pianTaoHua.length" :key="index">
                        <div class="jianju">
                          <span
                            v-html="ganZhiGaoLiangMethod(data.pianTaoHua[index - 1][2].substring(0, 1))"></span><span
                            v-html="ganZhiGaoLiangMethod(data.pianTaoHua[index - 1][2].substring(1, 2))"></span>年
                          ({{ data.pianTaoHua[index - 1][0] }}年 / {{ data.pianTaoHua[index - 1][1] }}岁)
                          <span v-if="'' !== data.pianTaoHua[index - 1][3]">
                            <el-tooltip placement="top" :enterable="false">
                              <template #content>
                                {{ data.pianTaoHua[index - 1][3].split('_')[1] }}，偏桃花运可能不会过于理想
                              </template>
                              <Tag class="tag" color="warning">
                                {{ data.pianTaoHua[index - 1][3].split('_')[0] }}
                              </Tag>
                            </el-tooltip>
                          </span>
                        </div>
                      </span>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>

              <div class="ganzhiliuyi">
                <div class="content">
                  <div>
                    天干留意：
                    <span v-if="data.tianGanLiuYi.length" class="item">
                      {{ data.tianGanLiuYi.join('、') }}
                    </span>
                  </div>
                  <div>
                    地支留意：
                    <span v-if="data.diZhiLiuYi.length" class="item">
                      {{ data.diZhiLiuYi.join('、') }}
                    </span>
                  </div>
                </div>
              </div>

            </div>

            <div class="mingpan" v-if="dataPage === 2">

              <div class="mingpan-left">

                <div class="go bgi1">
                  <div class="item">
                    <div class="title animation-8s">☯</div>
                  </div>
                  <div class="item">
                    <div class="title">年柱</div>
                  </div>
                  <div class="item">
                    <div class="title">月柱</div>
                  </div>
                  <div class="item">
                    <div class="title">日柱</div>
                  </div>
                  <div class="item">
                    <div class="title">时柱</div>
                  </div>
                  <div class="item borl" v-if="isDaYunMingPan">
                    <div class="title" v-if="daYunLun === 1">小运</div>
                    <div class="title" v-else>大运</div>
                  </div>
                  <div class="item" v-if="isLiuNianMingPan">
                    <div class="title">流年</div>
                  </div>
                  <div class="item" v-if="isLiuYueMingPan">
                    <div class="title">流月</div>
                  </div>
                  <div class="item" v-if="isLiuRiMingPan">
                    <div class="title">流日</div>
                  </div>
                  <div class="item" v-if="isLiuShiMingPan">
                    <div class="title">流时</div>
                  </div>
                  <div class="item borl" v-if="isTaiYuanMingPan">
                    <div class="title">胎元</div>
                  </div>
                  <div class="item" v-if="isTaiXiMingPan">
                    <div class="title">胎息</div>
                  </div>
                  <div class="item" v-if="isMingGongMingPan">
                    <div class="title">命宫</div>
                  </div>
                  <div class="item" v-if="isShenGongMingPan">
                    <div class="title">身宫</div>
                  </div>
                </div>

                <div class="go bgi2">
                  <div class="item">
                    <div class="title">主星</div>
                  </div>
                  <div class="item">
                    <div class="content">
                      {{ data.yearGanZhiZhuXing }}
                    </div>
                  </div>
                  <div class="item">
                    <div class="content">
                      {{ data.monthGanZhiZhuXing }}
                    </div>
                  </div>
                  <div class="item">
                    <div class="content">
                      {{ data.dayGanZhiZhuXing }}
                    </div>
                  </div>
                  <div class="item">
                    <div class="content">
                      {{ data.hourGanZhiZhuXing }}
                    </div>
                  </div>
                  <div class="item borl" v-if="isDaYunMingPan">
                    <div class="content">
                      {{ daYunMingPanData.daYunZhuXing }}
                    </div>
                  </div>
                  <div class="item" v-if="isLiuNianMingPan">
                    <div class="content">
                      {{ liuNianMingPanData.liuNianZhuXing }}
                    </div>
                  </div>
                  <div class="item" v-if="isLiuYueMingPan">
                    <div class="content">
                      {{ liuYueMingPanData.liuYueZhuXing }}
                    </div>
                  </div>
                  <div class="item" v-if="isLiuRiMingPan">
                    <div class="content">
                      {{ liuRiMingPanData.liuRiZhuXing }}
                    </div>
                  </div>
                  <div class="item" v-if="isLiuShiMingPan">
                    <div class="content">
                      {{ liuShiMingPanData.liuShiZhuXing }}
                    </div>
                  </div>
                  <div class="item borl" v-if="isTaiYuanMingPan">
                    <div class="content">
                      {{ taiMingShenMingPanData.taiYuanZhuXing }}
                    </div>
                  </div>
                  <div class="item" v-if="isTaiXiMingPan">
                    <div class="content">
                      {{ taiMingShenMingPanData.taiXiZhuXing }}
                    </div>
                  </div>
                  <div class="item" v-if="isMingGongMingPan">
                    <div class="content">
                      {{ taiMingShenMingPanData.mingGongZhuXing }}
                    </div>
                  </div>
                  <div class="item" v-if="isShenGongMingPan">
                    <div class="content">
                      {{ taiMingShenMingPanData.shenGongZhuXing }}
                    </div>
                  </div>
                </div>

                <div class="go bgi1">
                  <div class="item">
                    <div class="title">天干</div>
                  </div>
                  <div class="item">
                    <div class="content">
                      <b class="ganzhi" v-html="ganZhiGaoLiangMethod(data.yearGan)"></b>
                      <span v-html="ganZhiInWuXingGaoLiangMethod(data.yearGan)"></span>
                    </div>
                  </div>
                  <div class="item">
                    <div class="content">
                      <b class="ganzhi" v-html="ganZhiGaoLiangMethod(data.monthGan)"></b>
                      <span v-html="ganZhiInWuXingGaoLiangMethod(data.monthGan)"></span>
                    </div>
                  </div>
                  <div class="item">
                    <div class="content">
                      <b class="ganzhi" v-html="ganZhiGaoLiangMethod(data.dayGan)"></b>
                      <span v-html="ganZhiInWuXingGaoLiangMethod(data.dayGan)"></span>
                    </div>
                  </div>
                  <div class="item">
                    <div class="content">
                      <b class="ganzhi" v-html="ganZhiGaoLiangMethod(data.hourGan)"></b>
                      <span v-html="ganZhiInWuXingGaoLiangMethod(data.hourGan)"></span>
                    </div>
                  </div>
                  <div class="item borl" v-if="isDaYunMingPan">
                    <div class="content">
                      <b class="ganzhi" v-html="ganZhiGaoLiangMethod(daYunMingPanData.daYunGanZhi.substring(0, 1))"></b>
                      <span v-html="ganZhiInWuXingGaoLiangMethod(daYunMingPanData.daYunGanZhi.substring(0, 1))"></span>
                    </div>
                  </div>
                  <div class="item" v-if="isLiuNianMingPan">
                    <div class="content">
                      <b class="ganzhi"
                        v-html="ganZhiGaoLiangMethod(liuNianMingPanData.liuNianGanZhi.substring(0, 1))"></b>
                      <span
                        v-html="ganZhiInWuXingGaoLiangMethod(liuNianMingPanData.liuNianGanZhi.substring(0, 1))"></span>
                    </div>
                  </div>
                  <div class="item" v-if="isLiuYueMingPan">
                    <div class="content">
                      <b class="ganzhi"
                        v-html="ganZhiGaoLiangMethod(liuYueMingPanData.liuYueGanZhi.substring(0, 1))"></b>
                      <span
                        v-html="ganZhiInWuXingGaoLiangMethod(liuYueMingPanData.liuYueGanZhi.substring(0, 1))"></span>
                    </div>
                  </div>
                  <div class="item" v-if="isLiuRiMingPan">
                    <div class="content">
                      <b class="ganzhi" v-html="ganZhiGaoLiangMethod(liuRiMingPanData.liuRiGanZhi.substring(0, 1))"></b>
                      <span v-html="ganZhiInWuXingGaoLiangMethod(liuRiMingPanData.liuRiGanZhi.substring(0, 1))"></span>
                    </div>
                  </div>
                  <div class="item" v-if="isLiuShiMingPan">
                    <div class="content">
                      <b class="ganzhi"
                        v-html="ganZhiGaoLiangMethod(liuShiMingPanData.liuShiGanZhi.substring(0, 1))"></b>
                      <span
                        v-html="ganZhiInWuXingGaoLiangMethod(liuShiMingPanData.liuShiGanZhi.substring(0, 1))"></span>
                    </div>
                  </div>
                  <div class="item borl" v-if="isTaiYuanMingPan">
                    <div class="content">
                      <b class="ganzhi"
                        v-html="ganZhiGaoLiangMethod(taiMingShenMingPanData.taiYuanGanZhi.substring(0, 1))"></b>
                      <span
                        v-html="ganZhiInWuXingGaoLiangMethod(taiMingShenMingPanData.taiYuanGanZhi.substring(0, 1))"></span>
                    </div>
                  </div>
                  <div class="item" v-if="isTaiXiMingPan">
                    <div class="content">
                      <b class="ganzhi"
                        v-html="ganZhiGaoLiangMethod(taiMingShenMingPanData.taiXiGanZhi.substring(0, 1))"></b>
                      <span
                        v-html="ganZhiInWuXingGaoLiangMethod(taiMingShenMingPanData.taiXiGanZhi.substring(0, 1))"></span>
                    </div>
                  </div>
                  <div class="item" v-if="isMingGongMingPan">
                    <div class="content">
                      <b class="ganzhi"
                        v-html="ganZhiGaoLiangMethod(taiMingShenMingPanData.mingGongGanZhi.substring(0, 1))"></b>
                      <span
                        v-html="ganZhiInWuXingGaoLiangMethod(taiMingShenMingPanData.mingGongGanZhi.substring(0, 1))"></span>
                    </div>
                  </div>
                  <div class="item" v-if="isShenGongMingPan">
                    <div class="content">
                      <b class="ganzhi"
                        v-html="ganZhiGaoLiangMethod(taiMingShenMingPanData.shenGongGanZhi.substring(0, 1))"></b>
                      <span
                        v-html="ganZhiInWuXingGaoLiangMethod(taiMingShenMingPanData.shenGongGanZhi.substring(0, 1))"></span>
                    </div>
                  </div>
                </div>

                <div class="go bgi2">
                  <div class="item">
                    <div class="title">地支</div>
                  </div>
                  <div class="item">
                    <div class="content">
                      <b class="ganzhi" v-html="ganZhiGaoLiangMethod(data.yearZhi)"></b>
                      <span v-html="ganZhiInWuXingGaoLiangMethod(data.yearZhi)"></span>
                    </div>
                  </div>
                  <div class="item">
                    <div class="content">
                      <b class="ganzhi" v-html="ganZhiGaoLiangMethod(data.monthZhi)"></b>
                      <span v-html="ganZhiInWuXingGaoLiangMethod(data.monthZhi)"></span>
                    </div>
                  </div>
                  <div class="item">
                    <div class="content">
                      <b class="ganzhi" v-html="ganZhiGaoLiangMethod(data.dayZhi)"></b>
                      <span v-html="ganZhiInWuXingGaoLiangMethod(data.dayZhi)"></span>
                    </div>
                  </div>
                  <div class="item">
                    <div class="content">
                      <b class="ganzhi" v-html="ganZhiGaoLiangMethod(data.hourZhi)"></b>
                      <span v-html="ganZhiInWuXingGaoLiangMethod(data.hourZhi)"></span>
                    </div>
                  </div>
                  <div class="item borl" v-if="isDaYunMingPan">
                    <div class="content">
                      <b class="ganzhi" v-html="ganZhiGaoLiangMethod(daYunMingPanData.daYunGanZhi.substring(1, 2))"></b>
                      <span v-html="ganZhiInWuXingGaoLiangMethod(daYunMingPanData.daYunGanZhi.substring(1, 2))"></span>
                    </div>
                  </div>
                  <div class="item" v-if="isLiuNianMingPan">
                    <div class="content">
                      <b class="ganzhi"
                        v-html="ganZhiGaoLiangMethod(liuNianMingPanData.liuNianGanZhi.substring(1, 2))"></b>
                      <span
                        v-html="ganZhiInWuXingGaoLiangMethod(liuNianMingPanData.liuNianGanZhi.substring(1, 2))"></span>
                    </div>
                  </div>
                  <div class="item" v-if="isLiuYueMingPan">
                    <div class="content">
                      <b class="ganzhi"
                        v-html="ganZhiGaoLiangMethod(liuYueMingPanData.liuYueGanZhi.substring(1, 2))"></b>
                      <span
                        v-html="ganZhiInWuXingGaoLiangMethod(liuYueMingPanData.liuYueGanZhi.substring(1, 2))"></span>
                    </div>
                  </div>
                  <div class="item" v-if="isLiuRiMingPan">
                    <div class="content">
                      <b class="ganzhi" v-html="ganZhiGaoLiangMethod(liuRiMingPanData.liuRiGanZhi.substring(1, 2))"></b>
                      <span v-html="ganZhiInWuXingGaoLiangMethod(liuRiMingPanData.liuRiGanZhi.substring(1, 2))"></span>
                    </div>
                  </div>
                  <div class="item" v-if="isLiuShiMingPan">
                    <div class="content">
                      <b class="ganzhi"
                        v-html="ganZhiGaoLiangMethod(liuShiMingPanData.liuShiGanZhi.substring(1, 2))"></b>
                      <span
                        v-html="ganZhiInWuXingGaoLiangMethod(liuShiMingPanData.liuShiGanZhi.substring(1, 2))"></span>
                    </div>
                  </div>
                  <div class="item borl" v-if="isTaiYuanMingPan">
                    <div class="content">
                      <b class="ganzhi"
                        v-html="ganZhiGaoLiangMethod(taiMingShenMingPanData.taiYuanGanZhi.substring(1, 2))"></b>
                      <span
                        v-html="ganZhiInWuXingGaoLiangMethod(taiMingShenMingPanData.taiYuanGanZhi.substring(1, 2))"></span>
                    </div>
                  </div>
                  <div class="item" v-if="isTaiXiMingPan">
                    <div class="content">
                      <b class="ganzhi"
                        v-html="ganZhiGaoLiangMethod(taiMingShenMingPanData.taiXiGanZhi.substring(1, 2))"></b>
                      <span
                        v-html="ganZhiInWuXingGaoLiangMethod(taiMingShenMingPanData.taiXiGanZhi.substring(1, 2))"></span>
                    </div>
                  </div>
                  <div class="item" v-if="isMingGongMingPan">
                    <div class="content">
                      <b class="ganzhi"
                        v-html="ganZhiGaoLiangMethod(taiMingShenMingPanData.mingGongGanZhi.substring(1, 2))"></b>
                      <span
                        v-html="ganZhiInWuXingGaoLiangMethod(taiMingShenMingPanData.mingGongGanZhi.substring(1, 2))"></span>
                    </div>
                  </div>
                  <div class="item" v-if="isShenGongMingPan">
                    <div class="content">
                      <b class="ganzhi"
                        v-html="ganZhiGaoLiangMethod(taiMingShenMingPanData.shenGongGanZhi.substring(1, 2))"></b>
                      <span
                        v-html="ganZhiInWuXingGaoLiangMethod(taiMingShenMingPanData.shenGongGanZhi.substring(1, 2))"></span>
                    </div>
                  </div>
                </div>

                <div class="go bgi1">
                  <div class="item">
                    <div class="title">藏干</div>
                  </div>
                  <div class="item">
                    <div class="content">
                      <div v-for="index in data.yearZhiCangGan.length" :key="index" class="canggan">
                        <b v-html="ganZhiGaoLiangMethod(data.yearZhiCangGan[index - 1])"></b>
                        <span v-html="ganZhiInWuXingGaoLiangMethod(data.yearZhiCangGan[index - 1])"></span>
                      </div>
                    </div>
                  </div>
                  <div class="item">
                    <div class="content">
                      <div v-for="index in data.monthZhiCangGan.length" :key="index" class="canggan">
                        <b v-html="ganZhiGaoLiangMethod(data.monthZhiCangGan[index - 1])"></b>
                        <span v-html="ganZhiInWuXingGaoLiangMethod(data.monthZhiCangGan[index - 1])"></span>
                      </div>
                    </div>
                  </div>
                  <div class="item">
                    <div class="content">
                      <div v-for="index in data.dayZhiCangGan.length" :key="index" class="canggan">
                        <b v-html="ganZhiGaoLiangMethod(data.dayZhiCangGan[index - 1])"></b>
                        <span v-html="ganZhiInWuXingGaoLiangMethod(data.dayZhiCangGan[index - 1])"></span>
                      </div>
                    </div>
                  </div>
                  <div class="item">
                    <div class="content">
                      <div v-for="index in data.hourZhiCangGan.length" :key="index" class="canggan">
                        <b v-html="ganZhiGaoLiangMethod(data.hourZhiCangGan[index - 1])"></b>
                        <span v-html="ganZhiInWuXingGaoLiangMethod(data.hourZhiCangGan[index - 1])"></span>
                      </div>
                    </div>
                  </div>
                  <div class="item borl" v-if="isDaYunMingPan">
                    <div class="content">
                      <div v-for="index in daYunMingPanData.daYunCangGan.length" :key="index" class="canggan">
                        <b v-html="ganZhiGaoLiangMethod(daYunMingPanData.daYunCangGan[index - 1])"></b>
                        <span v-html="ganZhiInWuXingGaoLiangMethod(daYunMingPanData.daYunCangGan[index - 1])"></span>
                      </div>
                    </div>
                  </div>
                  <div class="item" v-if="isLiuNianMingPan">
                    <div class="content">
                      <div v-for="index in liuNianMingPanData.liuNianCangGan.length" :key="index" class="canggan">
                        <b v-html="ganZhiGaoLiangMethod(liuNianMingPanData.liuNianCangGan[index - 1])"></b>
                        <span
                          v-html="ganZhiInWuXingGaoLiangMethod(liuNianMingPanData.liuNianCangGan[index - 1])"></span>
                      </div>
                    </div>
                  </div>
                  <div class="item" v-if="isLiuYueMingPan">
                    <div class="content">
                      <div v-for="index in liuYueMingPanData.liuYueCangGan.length" :key="index" class="canggan">
                        <b v-html="ganZhiGaoLiangMethod(liuYueMingPanData.liuYueCangGan[index - 1])"></b>
                        <span v-html="ganZhiInWuXingGaoLiangMethod(liuYueMingPanData.liuYueCangGan[index - 1])"></span>
                      </div>
                    </div>
                  </div>
                  <div class="item" v-if="isLiuRiMingPan">
                    <div class="content">
                      <div v-for="index in liuRiMingPanData.liuRiCangGan.length" :key="index" class="canggan">
                        <b v-html="ganZhiGaoLiangMethod(liuRiMingPanData.liuRiCangGan[index - 1])"></b>
                        <span v-html="ganZhiInWuXingGaoLiangMethod(liuRiMingPanData.liuRiCangGan[index - 1])"></span>
                      </div>
                    </div>
                  </div>
                  <div class="item" v-if="isLiuShiMingPan">
                    <div class="content">
                      <div v-for="index in liuShiMingPanData.liuShiCangGan.length" :key="index" class="canggan">
                        <b v-html="ganZhiGaoLiangMethod(liuShiMingPanData.liuShiCangGan[index - 1])"></b>
                        <span v-html="ganZhiInWuXingGaoLiangMethod(liuShiMingPanData.liuShiCangGan[index - 1])"></span>
                      </div>
                    </div>
                  </div>
                  <div class="item borl" v-if="isTaiYuanMingPan">
                    <div class="content">
                      <div v-for="index in taiMingShenMingPanData.taiYuanCangGan.length" :key="index" class="canggan">
                        <b v-html="ganZhiGaoLiangMethod(taiMingShenMingPanData.taiYuanCangGan[index - 1])"></b>
                        <span
                          v-html="ganZhiInWuXingGaoLiangMethod(taiMingShenMingPanData.taiYuanCangGan[index - 1])"></span>
                      </div>
                    </div>
                  </div>
                  <div class="item" v-if="isTaiXiMingPan">
                    <div class="content">
                      <div v-for="index in taiMingShenMingPanData.taiXiCangGan.length" :key="index" class="canggan">
                        <b v-html="ganZhiGaoLiangMethod(taiMingShenMingPanData.taiXiCangGan[index - 1])"></b>
                        <span
                          v-html="ganZhiInWuXingGaoLiangMethod(taiMingShenMingPanData.taiXiCangGan[index - 1])"></span>
                      </div>
                    </div>
                  </div>
                  <div class="item" v-if="isMingGongMingPan">
                    <div class="content">
                      <div v-for="index in taiMingShenMingPanData.mingGongCangGan.length" :key="index" class="canggan">
                        <b v-html="ganZhiGaoLiangMethod(taiMingShenMingPanData.mingGongCangGan[index - 1])"></b>
                        <span
                          v-html="ganZhiInWuXingGaoLiangMethod(taiMingShenMingPanData.mingGongCangGan[index - 1])"></span>
                      </div>
                    </div>
                  </div>
                  <div class="item" v-if="isShenGongMingPan">
                    <div class="content">
                      <div v-for="index in taiMingShenMingPanData.shenGongCangGan.length" :key="index" class="canggan">
                        <b v-html="ganZhiGaoLiangMethod(taiMingShenMingPanData.shenGongCangGan[index - 1])"></b>
                        <span
                          v-html="ganZhiInWuXingGaoLiangMethod(taiMingShenMingPanData.shenGongCangGan[index - 1])"></span>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="go bgi2">
                  <div class="item">
                    <div class="title">副星</div>
                  </div>
                  <div class="item">
                    <div class="content">
                      <div v-for="index in data.yearGanZhiFuXing.length" :key="index" class="fuxing">
                        {{ data.yearGanZhiFuXing[index - 1] }} <br />
                      </div>
                    </div>
                  </div>
                  <div class="item">
                    <div class="content">
                      <div v-for="index in data.monthGanZhiFuXing.length" :key="index" class="fuxing">
                        {{ data.monthGanZhiFuXing[index - 1] }} <br />
                      </div>
                    </div>
                  </div>
                  <div class="item">
                    <div class="content">
                      <div v-for="index in data.dayGanZhiFuXing.length" :key="index" class="fuxing">
                        {{ data.dayGanZhiFuXing[index - 1] }} <br />
                      </div>
                    </div>
                  </div>
                  <div class="item">
                    <div class="content">
                      <div v-for="index in data.hourGanZhiFuXing.length" :key="index" class="fuxing">
                        {{ data.hourGanZhiFuXing[index - 1] }} <br />
                      </div>
                    </div>
                  </div>
                  <div class="item borl" v-if="isDaYunMingPan">
                    <div class="content">
                      <div v-for="index in daYunMingPanData.daYunFuXing.length" :key="index" class="fuxing">
                        {{ daYunMingPanData.daYunFuXing[index - 1] }} <br />
                      </div>
                    </div>
                  </div>
                  <div class="item" v-if="isLiuNianMingPan">
                    <div class="content">
                      <div v-for="index in liuNianMingPanData.liuNianFuXing.length" :key="index" class="fuxing">
                        {{ liuNianMingPanData.liuNianFuXing[index - 1] }} <br />
                      </div>
                    </div>
                  </div>
                  <div class="item" v-if="isLiuYueMingPan">
                    <div class="content">
                      <div v-for="index in liuYueMingPanData.liuYueFuXing.length" :key="index" class="fuxing">
                        {{ liuYueMingPanData.liuYueFuXing[index - 1] }} <br />
                      </div>
                    </div>
                  </div>
                  <div class="item" v-if="isLiuRiMingPan">
                    <div class="content">
                      <div v-for="index in liuRiMingPanData.liuRiFuXing.length" :key="index" class="fuxing">
                        {{ liuRiMingPanData.liuRiFuXing[index - 1] }} <br />
                      </div>
                    </div>
                  </div>
                  <div class="item" v-if="isLiuShiMingPan">
                    <div class="content">
                      <div v-for="index in liuShiMingPanData.liuShiFuXing.length" :key="index" class="fuxing">
                        {{ liuShiMingPanData.liuShiFuXing[index - 1] }} <br />
                      </div>
                    </div>
                  </div>
                  <div class="item borl" v-if="isTaiYuanMingPan">
                    <div class="content">
                      <div v-for="index in taiMingShenMingPanData.taiYuanFuXing.length" :key="index" class="fuxing">
                        {{ taiMingShenMingPanData.taiYuanFuXing[index - 1] }} <br />
                      </div>
                    </div>
                  </div>
                  <div class="item" v-if="isTaiXiMingPan">
                    <div class="content">
                      <div v-for="index in taiMingShenMingPanData.taiXiFuXing.length" :key="index" class="fuxing">
                        {{ taiMingShenMingPanData.taiXiFuXing[index - 1] }} <br />
                      </div>
                    </div>
                  </div>
                  <div class="item" v-if="isMingGongMingPan">
                    <div class="content">
                      <div v-for="index in taiMingShenMingPanData.mingGongFuXing.length" :key="index" class="fuxing">
                        {{ taiMingShenMingPanData.mingGongFuXing[index - 1] }} <br />
                      </div>
                    </div>
                  </div>
                  <div class="item" v-if="isShenGongMingPan">
                    <div class="content">
                      <div v-for="index in taiMingShenMingPanData.shenGongFuXing.length" :key="index" class="fuxing">
                        {{ taiMingShenMingPanData.shenGongFuXing[index - 1] }} <br />
                      </div>
                    </div>
                  </div>
                </div>

                <div class="go bgi1">
                  <div class="item">
                    <div class="title">自坐</div>
                  </div>
                  <div class="item">
                    <div class="content">
                      {{ data.yearGanZhiZiZuo }}
                    </div>
                  </div>
                  <div class="item">
                    <div class="content">
                      {{ data.monthGanZhiZiZuo }}
                    </div>
                  </div>
                  <div class="item">
                    <div class="content">
                      {{ data.dayGanZhiZiZuo }}
                    </div>
                  </div>
                  <div class="item">
                    <div class="content">
                      {{ data.hourGanZhiZiZuo }}
                    </div>
                  </div>
                  <div class="item borl" v-if="isDaYunMingPan">
                    <div class="content">
                      {{ daYunMingPanData.daYunZiZuo }}
                    </div>
                  </div>
                  <div class="item" v-if="isLiuNianMingPan">
                    <div class="content">
                      {{ liuNianMingPanData.liuNianZiZuo }}
                    </div>
                  </div>
                  <div class="item" v-if="isLiuYueMingPan">
                    <div class="content">
                      {{ liuYueMingPanData.liuYueZiZuo }}
                    </div>
                  </div>
                  <div class="item" v-if="isLiuRiMingPan">
                    <div class="content">
                      {{ liuRiMingPanData.liuRiZiZuo }}
                    </div>
                  </div>
                  <div class="item" v-if="isLiuShiMingPan">
                    <div class="content">
                      {{ liuShiMingPanData.liuShiZiZuo }}
                    </div>
                  </div>
                  <div class="item borl" v-if="isTaiYuanMingPan">
                    <div class="content">
                      {{ taiMingShenMingPanData.taiYuanZiZuo }}
                    </div>
                  </div>
                  <div class="item" v-if="isTaiXiMingPan">
                    <div class="content">
                      {{ taiMingShenMingPanData.taiXiZiZuo }}
                    </div>
                  </div>
                  <div class="item" v-if="isMingGongMingPan">
                    <div class="content">
                      {{ taiMingShenMingPanData.mingGongZiZuo }}
                    </div>
                  </div>
                  <div class="item" v-if="isShenGongMingPan">
                    <div class="content">
                      {{ taiMingShenMingPanData.shenGongZiZuo }}
                    </div>
                  </div>
                </div>

                <div class="go bgi2">
                  <div class="item">
                    <div class="title">星运</div>
                  </div>
                  <div class="item">
                    <div class="content">
                      {{ data.yearGanZhiXingYun }}
                    </div>
                  </div>
                  <div class="item">
                    <div class="content">
                      {{ data.monthGanZhiXingYun }}
                    </div>
                  </div>
                  <div class="item">
                    <div class="content">
                      {{ data.dayGanZhiXingYun }}
                    </div>
                  </div>
                  <div class="item">
                    <div class="content">
                      {{ data.hourGanZhiXingYun }}
                    </div>
                  </div>
                  <div class="item borl" v-if="isDaYunMingPan">
                    <div class="content">
                      {{ daYunMingPanData.daYunXingYun }}
                    </div>
                  </div>
                  <div class="item" v-if="isLiuNianMingPan">
                    <div class="content">
                      {{ liuNianMingPanData.liuNianXingYun }}
                    </div>
                  </div>
                  <div class="item" v-if="isLiuYueMingPan">
                    <div class="content">
                      {{ liuYueMingPanData.liuYueXingYun }}
                    </div>
                  </div>
                  <div class="item" v-if="isLiuRiMingPan">
                    <div class="content">
                      {{ liuRiMingPanData.liuRiXingYun }}
                    </div>
                  </div>
                  <div class="item" v-if="isLiuShiMingPan">
                    <div class="content">
                      {{ liuShiMingPanData.liuShiXingYun }}
                    </div>
                  </div>
                  <div class="item borl" v-if="isTaiYuanMingPan">
                    <div class="content">
                      {{ taiMingShenMingPanData.taiYuanXingYun }}
                    </div>
                  </div>
                  <div class="item" v-if="isTaiXiMingPan">
                    <div class="content">
                      {{ taiMingShenMingPanData.taiXiXingYun }}
                    </div>
                  </div>
                  <div class="item" v-if="isMingGongMingPan">
                    <div class="content">
                      {{ taiMingShenMingPanData.mingGongXingYun }}
                    </div>
                  </div>
                  <div class="item" v-if="isShenGongMingPan">
                    <div class="content">
                      {{ taiMingShenMingPanData.shenGongXingYun }}
                    </div>
                  </div>
                </div>

                <div class="go bgi1">
                  <div class="item">
                    <div class="title">空亡</div>
                  </div>
                  <div class="item">
                    <div class="content">
                      {{ data.yearGanZhiKongWang }}
                    </div>
                  </div>
                  <div class="item">
                    <div class="content">
                      {{ data.monthGanZhiKongWang }}
                    </div>
                  </div>
                  <div class="item">
                    <div class="content">
                      {{ data.dayGanZhiKongWang }}
                    </div>
                  </div>
                  <div class="item">
                    <div class="content">
                      {{ data.hourGanZhiKongWang }}
                    </div>
                  </div>
                  <div class="item borl" v-if="isDaYunMingPan">
                    <div class="content">
                      {{ daYunMingPanData.daYunKongWang }}
                    </div>
                  </div>
                  <div class="item" v-if="isLiuNianMingPan">
                    <div class="content">
                      {{ liuNianMingPanData.liuNianKongWang }}
                    </div>
                  </div>
                  <div class="item" v-if="isLiuYueMingPan">
                    <div class="content">
                      {{ liuYueMingPanData.liuYueKongWang }}
                    </div>
                  </div>
                  <div class="item" v-if="isLiuRiMingPan">
                    <div class="content">
                      {{ liuRiMingPanData.liuRiKongWang }}
                    </div>
                  </div>
                  <div class="item" v-if="isLiuShiMingPan">
                    <div class="content">
                      {{ liuShiMingPanData.liuShiKongWang }}
                    </div>
                  </div>
                  <div class="item borl" v-if="isTaiYuanMingPan">
                    <div class="content">
                      {{ taiMingShenMingPanData.taiYuanKongWang }}
                    </div>
                  </div>
                  <div class="item" v-if="isTaiXiMingPan">
                    <div class="content">
                      {{ taiMingShenMingPanData.taiXiKongWang }}
                    </div>
                  </div>
                  <div class="item" v-if="isMingGongMingPan">
                    <div class="content">
                      {{ taiMingShenMingPanData.mingGongKongWang }}
                    </div>
                  </div>
                  <div class="item" v-if="isShenGongMingPan">
                    <div class="content">
                      {{ taiMingShenMingPanData.shenGongKongWang }}
                    </div>
                  </div>
                </div>

                <div class="go bgi2">
                  <div class="item">
                    <div class="title">纳音</div>
                  </div>
                  <div class="item">
                    <div class="content">
                      {{ data.yearGanZhiNaYin }}
                    </div>
                  </div>
                  <div class="item">
                    <div class="content">
                      {{ data.monthGanZhiNaYin }}
                    </div>
                  </div>
                  <div class="item">
                    <div class="content">
                      {{ data.dayGanZhiNaYin }}
                    </div>
                  </div>
                  <div class="item">
                    <div class="content">
                      {{ data.hourGanZhiNaYin }}
                    </div>
                  </div>
                  <div class="item borl" v-if="isDaYunMingPan">
                    <div class="content">
                      {{ daYunMingPanData.daYunNaYin }}
                    </div>
                  </div>
                  <div class="item" v-if="isLiuNianMingPan">
                    <div class="content">
                      {{ liuNianMingPanData.liuNianNaYin }}
                    </div>
                  </div>
                  <div class="item" v-if="isLiuYueMingPan">
                    <div class="content">
                      {{ liuYueMingPanData.liuYueNaYin }}
                    </div>
                  </div>
                  <div class="item" v-if="isLiuRiMingPan">
                    <div class="content">
                      {{ liuRiMingPanData.liuRiNaYin }}
                    </div>
                  </div>
                  <div class="item" v-if="isLiuShiMingPan">
                    <div class="content">
                      {{ liuShiMingPanData.liuShiNaYin }}
                    </div>
                  </div>
                  <div class="item borl" v-if="isTaiYuanMingPan">
                    <div class="content">
                      {{ taiMingShenMingPanData.taiYuanNaYin }}
                    </div>
                  </div>
                  <div class="item" v-if="isTaiXiMingPan">
                    <div class="content">
                      {{ taiMingShenMingPanData.taiXiNaYin }}
                    </div>
                  </div>
                  <div class="item" v-if="isMingGongMingPan">
                    <div class="content">
                      {{ taiMingShenMingPanData.mingGongNaYin }}
                    </div>
                  </div>
                  <div class="item" v-if="isShenGongMingPan">
                    <div class="content">
                      {{ taiMingShenMingPanData.shenGongNaYin }}
                    </div>
                  </div>
                </div>

                <div class="go bgi">
                  <div class="item">
                    <div class="title">神煞</div>
                  </div>
                  <div class="item">
                    <div class="content">
                      <div v-for="index in data.yearGanZhiShenSha.length" :key="index" class="shensha">
                        {{ data.yearGanZhiShenSha[index - 1] }}
                      </div>
                    </div>
                  </div>
                  <div class="item">
                    <div class="content">
                      <div v-for="index in data.monthGanZhiShenSha.length" :key="index" class="shensha">
                        {{ data.monthGanZhiShenSha[index - 1] }}
                      </div>
                    </div>
                  </div>
                  <div class="item">
                    <div class="content">
                      <div v-for="index in data.dayGanZhiShenSha.length" :key="index" class="shensha">
                        {{ data.dayGanZhiShenSha[index - 1] }}
                      </div>
                    </div>
                  </div>
                  <div class="item">
                    <div class="content">
                      <div v-for="index in data.hourGanZhiShenSha.length" :key="index" class="shensha">
                        {{ data.hourGanZhiShenSha[index - 1] }}
                      </div>
                    </div>
                  </div>
                  <div class="item borl" v-if="isDaYunMingPan">
                    <div class="content">
                      <div v-for="index in daYunMingPanData.daYunShenSha.length" :key="index" class="shensha">
                        {{ daYunMingPanData.daYunShenSha[index - 1] }}
                      </div>
                    </div>
                  </div>
                  <div class="item" v-if="isLiuNianMingPan">
                    <div class="content">
                      <div v-for="index in liuNianMingPanData.liuNianShenSha.length" :key="index" class="shensha">
                        {{ liuNianMingPanData.liuNianShenSha[index - 1] }}
                      </div>
                    </div>
                  </div>
                  <div class="item" v-if="isLiuYueMingPan">
                    <div class="content">
                      <div v-for="index in liuYueMingPanData.liuYueShenSha.length" :key="index" class="shensha">
                        {{ liuYueMingPanData.liuYueShenSha[index - 1] }}
                      </div>
                    </div>
                  </div>
                  <div class="item" v-if="isLiuRiMingPan">
                    <div class="content">
                      <div v-for="index in liuRiMingPanData.liuRiShenSha.length" :key="index" class="shensha">
                        {{ liuRiMingPanData.liuRiShenSha[index - 1] }}
                      </div>
                    </div>
                  </div>
                  <div class="item" v-if="isLiuShiMingPan">
                    <div class="content">
                      <div v-for="index in liuShiMingPanData.liuShiShenSha.length" :key="index" class="shensha">
                        {{ liuShiMingPanData.liuShiShenSha[index - 1] }}
                      </div>
                    </div>
                  </div>
                  <div class="item borl" v-if="isTaiYuanMingPan">
                    <div class="content">
                      <div v-for="index in taiMingShenMingPanData.taiYuanShenSha.length" :key="index" class="shensha">
                        {{ taiMingShenMingPanData.taiYuanShenSha[index - 1] }}
                      </div>
                    </div>
                  </div>
                  <div class="item" v-if="isTaiXiMingPan">
                    <div class="content">
                      <div v-for="index in taiMingShenMingPanData.taiXiShenSha.length" :key="index" class="shensha">
                        {{ taiMingShenMingPanData.taiXiShenSha[index - 1] }}
                      </div>
                    </div>
                  </div>
                  <div class="item" v-if="isMingGongMingPan">
                    <div class="content">
                      <div v-for="index in taiMingShenMingPanData.mingGongShenSha.length" :key="index" class="shensha">
                        {{ taiMingShenMingPanData.mingGongShenSha[index - 1] }}
                      </div>
                    </div>
                  </div>
                  <div class="item" v-if="isShenGongMingPan">
                    <div class="content">
                      <div v-for="index in taiMingShenMingPanData.shenGongShenSha.length" :key="index" class="shensha">
                        {{ taiMingShenMingPanData.shenGongShenSha[index - 1] }}
                      </div>
                    </div>
                  </div>
                </div>

              </div>

              <div class="mingpan-right">

                <div class="qiyun">
                  <div><span class="title">起运：</span>{{ data.qiYun }}</div>
                  <div><span class="title">交运：</span>{{ data.jiaoYun }}</div>
                  <div class="mingpanmode">
                    <el-tooltip placement="top-end" :enterable="false">
                      <template #content>
                        已知BUG：切换大运流年后，再次切换此选项会出现左右数据不对应情况
                      </template>
                      <div>
                        <el-radio-group size="small" v-model="mingPanMode" v-for="item in mingPanModeOptions"
                          :key="item">
                          <el-radio-button :label="item.label" :value="item.value" />
                        </el-radio-group>
                      </div>
                    </el-tooltip>

                  </div>
                </div>

                <div class="dayunliunian">
                  <div class="title">
                    <div class="item"><b>大<br />运</b></div>
                  </div>
                  <div class="content">
                    <div class="item">
                      <span v-for="index in daYunData.length" :key="index">
                        <span v-if="daYunLun === index">
                          <div class="one-yes">
                            <div class="age">{{ daYunData[index - 1].age }}岁</div>
                            <div class="year">{{ daYunData[index - 1].solarYear }}年</div>
                            <span v-if="index !== 1">
                              <div class="ganZhi">
                                <span v-html="ganZhiGaoLiangMethod2(daYunData[index - 1].ganZhi)"></span>
                              </div>
                              <div class="shiShen">
                                <div class="l">
                                  {{ daYunData[index - 1].tianShen.substring(0, 1) }}<br />{{ daYunData[index -
                                    1].tianShen.substring(1, 2) }}
                                </div>
                                <div class="r">
                                  {{ daYunData[index - 1].diShen.substring(0, 1) }}<br />{{ daYunData[index -
                                    1].diShen.substring(1, 2) }}
                                </div>
                              </div>
                            </span>
                            <span v-else>
                              <div class="xiaoyun">小<br />运</div>
                            </span>
                          </div>
                        </span>
                        <span v-else>
                          <div class="one-no"
                            @click="daYunMethod(index, daYunData[index - 1].ganZhi, daYunData[index - 1].solarDate)">
                            <div class="age">{{ daYunData[index - 1].age }}岁</div>
                            <div class="year">{{ daYunData[index - 1].solarYear }}年</div>
                            <span v-if="index != 1">
                              <div class="ganZhi">
                                <span v-html="ganZhiGaoLiangMethod2(daYunData[index - 1].ganZhi)"></span>
                              </div>
                              <div class="shiShen">
                                <div class="l">
                                  {{ daYunData[index - 1].tianShen.substring(0, 1) }}<br />{{ daYunData[index -
                                    1].tianShen.substring(1, 2) }}
                                </div>
                                <div class="r">
                                  {{ daYunData[index - 1].diShen.substring(0, 1) }}<br />{{ daYunData[index -
                                    1].diShen.substring(1, 2) }}
                                </div>
                              </div>
                            </span>
                            <span v-else>
                              <div class="xiaoyun">小<br />运</div>
                            </span>
                          </div>
                        </span>
                      </span>
                    </div>
                  </div>
                </div>

                <div class="dayunliunian">
                  <div class="title">
                    <div class="item"><b>流<br />年</b></div>
                  </div>
                  <div class="content">
                    <div class="item">
                      <span v-for="index in liuNianData.length" :key="index">
                        <span v-if="liuNianLun === index">
                          <div class="one-yes">
                            <div class="age">{{ liuNianData[index - 1].age }}岁</div>
                            <div class="year">{{ liuNianData[index - 1].solarYear }}年</div>
                            <div class="ganZhi">
                              <span v-html="ganZhiGaoLiangMethod2(liuNianData[index - 1].ganZhi)"></span>
                            </div>
                            <div class="shiShen">
                              <div class="l">
                                {{ liuNianData[index - 1].tianShen.substring(0, 1) }}<br />{{ liuNianData[index -
                                  1].tianShen.substring(1, 2) }}
                              </div>
                              <div class="r">
                                {{ liuNianData[index - 1].diShen.substring(0, 1) }}<br />{{ liuNianData[index -
                                  1].diShen.substring(1, 2) }}
                              </div>
                            </div>
                          </div>
                        </span>
                        <span v-else>
                          <div class="one-no"
                            @click="liuNianMethod(index, liuNianData[index - 1].ganZhi, liuNianData[index - 1].solarDate, false)">
                            <div class="age">{{ liuNianData[index - 1].age }}岁</div>
                            <div class="year">{{ liuNianData[index - 1].solarYear }}年</div>
                            <div class="ganZhi">
                              <span v-html="ganZhiGaoLiangMethod2(liuNianData[index - 1].ganZhi)"></span>
                            </div>
                            <div class="shiShen">
                              <div class="l">
                                {{ liuNianData[index - 1].tianShen.substring(0, 1) }}<br />{{ liuNianData[index -
                                  1].tianShen.substring(1, 2) }}
                              </div>
                              <div class="r">
                                {{ liuNianData[index - 1].diShen.substring(0, 1) }}<br />{{ liuNianData[index -
                                  1].diShen.substring(1, 2) }}
                              </div>
                            </div>
                          </div>
                        </span>
                      </span>
                    </div>
                  </div>
                </div>

                <div class="xiaoyun">
                  <div class="title">
                    <div class="item"><b>小<br />运</b></div>
                  </div>
                  <div class="content">
                    <div class="item">
                      <span v-for="index in xiaoYunData.length" :key="index">
                        <span v-if="liuNianLun === index">
                          <div class="one-yes">
                            <div class="ganZhi">
                              <span v-html="ganZhiGaoLiangMethod2(xiaoYunData[index - 1].ganZhi)"></span>
                            </div>
                            <div class="shiShen">
                              <div class="l">
                                {{ xiaoYunData[index - 1].tianShen.substring(0, 1) }}<br />{{ xiaoYunData[index -
                                  1].tianShen.substring(1, 2) }}
                              </div>
                              <div class="r">
                                {{ xiaoYunData[index - 1].diShen.substring(0, 1) }}<br />{{ xiaoYunData[index -
                                  1].diShen.substring(1, 2) }}
                              </div>
                            </div>
                          </div>
                        </span>
                        <span v-else>
                          <div class="one-no"
                            @click="liuNianMethod(index, liuNianData[index - 1].ganZhi, xiaoYunData[index - 1].solarDate, true)">
                            <div class="ganZhi">
                              <span v-html="ganZhiGaoLiangMethod2(xiaoYunData[index - 1].ganZhi)"></span>
                            </div>
                            <div class="shiShen">
                              <div class="l">
                                {{ xiaoYunData[index - 1].tianShen.substring(0, 1) }}<br />{{ xiaoYunData[index -
                                  1].tianShen.substring(1, 2) }}
                              </div>
                              <div class="r">
                                {{ xiaoYunData[index - 1].diShen.substring(0, 1) }}<br />{{ xiaoYunData[index -
                                  1].diShen.substring(1, 2) }}
                              </div>
                            </div>
                          </div>
                        </span>
                      </span>
                    </div>
                  </div>
                </div>

                <div class="dayunliunian">
                  <div class="title">
                    <div class="item"><b>流<br />月</b></div>
                  </div>
                  <div class="content">
                    <div class="item">
                      <span v-for="index in liuYueData.length" :key="index">
                        <span v-if="liuYueLun === index">
                          <div class="one-yes">
                            <div class="age2">{{ liuYueData[index - 1].lunarMonth + '/' + liuYueData[index - 1].shiErJie
                            }}</div>
                            <div class="year">{{ liuYueData[index - 1].solarMonthDay }}</div>
                            <div class="ganZhi">
                              <span v-html="ganZhiGaoLiangMethod2(liuYueData[index - 1].ganZhi)"></span>
                            </div>
                            <div class="shiShen">
                              <div class="l">
                                {{ liuYueData[index - 1].tianShen.substring(0, 1) }}<br />{{ liuYueData[index -
                                  1].tianShen.substring(1, 2) }}
                              </div>
                              <div class="r">
                                {{ liuYueData[index - 1].diShen.substring(0, 1) }}<br />{{ liuYueData[index -
                                  1].diShen.substring(1, 2) }}
                              </div>
                            </div>
                          </div>
                        </span>
                        <span v-else>
                          <div class="one-no"
                            @click="liuYueMethod(index, liuYueData[index - 1].ganZhi, liuYueData[index - 1].solarDate)">
                            <div class="age2">{{ liuYueData[index - 1].lunarMonth + '/' + liuYueData[index - 1].shiErJie
                            }}</div>
                            <div class="year">{{ liuYueData[index - 1].solarMonthDay }}</div>
                            <div class="ganZhi">
                              <span v-html="ganZhiGaoLiangMethod2(liuYueData[index - 1].ganZhi)"></span>
                            </div>
                            <div class="shiShen">
                              <div class="l">
                                {{ liuYueData[index - 1].tianShen.substring(0, 1) }}<br />{{ liuYueData[index -
                                  1].tianShen.substring(1, 2) }}
                              </div>
                              <div class="r">
                                {{ liuYueData[index - 1].diShen.substring(0, 1) }}<br />{{ liuYueData[index -
                                  1].diShen.substring(1, 2) }}
                              </div>
                            </div>
                          </div>
                        </span>
                      </span>
                    </div>
                  </div>
                </div>

                <div class="dayunliunian" v-if="isLiuRiData">
                  <div class="title">
                    <div class="item"><b>流<br />日</b></div>
                  </div>
                  <div class="content">
                    <div class="item">
                      <span v-for="index in liuRiData.length" :key="index">
                        <span v-if="liuRiLun == index">
                          <div class="one-yes">
                            <div class="age">{{ liuRiData[index - 1].lunarDay }}</div>
                            <div class="year">{{ liuRiData[index - 1].solarDay }}</div>
                            <div class="ganZhi">
                              <span v-html="ganZhiGaoLiangMethod2(liuRiData[index - 1].ganZhi)"></span>
                            </div>
                            <div class="shiShen">
                              <div class="l">
                                {{ liuRiData[index - 1].tianShen.substring(0, 1) }}<br />{{ liuRiData[index -
                                  1].tianShen.substring(1, 2) }}
                              </div>
                              <div class="r">
                                {{ liuRiData[index - 1].diShen.substring(0, 1) }}<br />{{ liuRiData[index -
                                  1].diShen.substring(1, 2) }}
                              </div>
                            </div>
                          </div>
                        </span>
                        <span v-else>
                          <div class="one-no"
                            @click="liuRiMethod(index, liuRiData[index - 1].ganZhi, liuRiData[index - 1].solarDate)">
                            <div class="age">{{ liuRiData[index - 1].lunarDay }}</div>
                            <div class="year">{{ liuRiData[index - 1].solarDay }}</div>
                            <div class="ganZhi">
                              <span v-html="ganZhiGaoLiangMethod2(liuRiData[index - 1].ganZhi)"></span>
                            </div>
                            <div class="shiShen">
                              <div class="l">
                                {{ liuRiData[index - 1].tianShen.substring(0, 1) }}<br />{{ liuRiData[index -
                                  1].tianShen.substring(1, 2) }}
                              </div>
                              <div class="r">
                                {{ liuRiData[index - 1].diShen.substring(0, 1) }}<br />{{ liuRiData[index -
                                  1].diShen.substring(1, 2) }}
                              </div>
                            </div>
                          </div>
                        </span>
                      </span>
                    </div>
                  </div>
                </div>

                <div class="dayunliunian" v-if="isLiuShiData">
                  <div class="title">
                    <div class="item"><b>流<br />时</b></div>
                  </div>
                  <div class="content">
                    <div class="item">
                      <span v-for="index in liuShiData.length" :key="index">
                        <span v-if="liuShiLun === index">
                          <div class="one-yes">
                            <div class="age">{{ liuShiData[index - 1].shiErShiChenHaMing }}</div>
                            <div class="year">{{ liuShiData[index - 1].solarHour }}</div>
                            <div class="ganZhi">
                              <span v-html="ganZhiGaoLiangMethod2(liuShiData[index - 1].ganZhi)"></span>
                            </div>
                            <div class="shiShen">
                              <div class="l">
                                {{ liuShiData[index - 1].tianShen.substring(0, 1) }}<br />{{ liuShiData[index -
                                  1].tianShen.substring(1, 2) }}
                              </div>
                              <div class="r">
                                {{ liuShiData[index - 1].diShen.substring(0, 1) }}<br />{{ liuShiData[index -
                                  1].diShen.substring(1, 2) }}
                              </div>
                            </div>
                          </div>
                        </span>
                        <span v-else>
                          <div class="one-no" @click="liuShiMethod(index, liuShiData[index - 1].ganZhi)">
                            <div class="age">{{ liuShiData[index - 1].shiErShiChenHaMing }}</div>
                            <div class="year">{{ liuShiData[index - 1].solarHour }}</div>
                            <div class="ganZhi">
                              <span v-html="ganZhiGaoLiangMethod2(liuShiData[index - 1].ganZhi)"></span>
                            </div>
                            <div class="shiShen">
                              <div class="l">
                                {{ liuShiData[index - 1].tianShen.substring(0, 1) }}<br />{{ liuShiData[index -
                                  1].tianShen.substring(1, 2) }}
                              </div>
                              <div class="r">
                                {{ liuShiData[index - 1].diShen.substring(0, 1) }}<br />{{ liuShiData[index -
                                  1].diShen.substring(1, 2) }}
                              </div>
                            </div>
                          </div>
                        </span>
                      </span>
                    </div>
                  </div>
                </div>

              </div>

              <div class="ganzhiliuyi">
                <div class="content">
                  <div>
                    天干留意：
                    <span v-if="tianGanLiuYi.length" class="item">
                      {{ tianGanLiuYi.join('，') }}
                    </span>
                  </div>
                  <div>
                    地支留意：
                    <span v-if="diZhiLiuYi.length" class="item">
                      {{ diZhiLiuYi.join('，') }}
                    </span>
                  </div>
                </div>
              </div>

            </div>

            <div class="gengduo" v-if="dataPage === 3">

              <div class="div">
                <div class="header">
                  ༺ 星宿 ༻
                </div>
                <div class="shuju">
                  <div class="item">
                    <span class="title">星宿</span>
                    <b class="content">{{ data.xingXiu }}（{{ data.xiuJiXiong }}）</b>
                  </div>
                  <div>
                    <span class="title">歌诀</span>
                    <span>{{ data.xiuJiXiongGeJue }}</span>
                  </div>
                </div>
              </div>

              <div class="div">
                <div class="header">
                  ༺ 命卦 ༻
                </div>
                <div class="shuju">
                  <div class="item">
                    <span class="title">命卦</span>
                    <b class="content">{{ data.mingGua }}</b>
                  </div>
                  <div class="item">
                    <span class="title">基本分析</span>
                    <span>{{ data.mingGuaJiBen }}</span>
                  </div>
                  <div>
                    <span class="title">风水分析</span>
                    <span>{{ data.mingGuaFengShui }}</span>
                  </div>
                </div>
              </div>

              <div class="div">
                <div class="header">
                  ༺ 袁天罡称骨 ༻
                </div>
                <div class="shuju">
                  <div class="item">
                    <span class="title">骨重</span>
                    <b class="content">{{ data.guZhong }}</b>
                  </div>
                  <div>
                    <span class="title">批注</span>
                    <span>{{ data.guZhongPiZhu }}</span>
                  </div>
                </div>
              </div>

              <div class="div">
                <div class="header">
                  ༺ 日柱论命 ༻
                </div>
                <div class="shuju">
                  <div>
                    <span class="title">参考</span>
                    <span>{{ data.dayZhuLunMing }}</span>
                  </div>
                </div>
              </div>

              <div class="div">
                <div class="header">
                  ༺ 姻缘分析 ༻
                </div>
                <div class="shuju">
                  <div>
                    <span class="title">参考</span>
                    <span>
                      姻缘天注定，妙不可言，千回百转还是<span v-if="'男' == data.sex">她</span><span
                        v-if="'女' == data.sex">他</span>，第一直觉往往更为准确，这一世望彼此珍惜、修成正果。
                    </span>
                  </div>
                </div>
              </div>

              <div class="div">
                <div class="header">
                  ༺ 小儿关煞 ༻
                </div>
                <div class="shuju">
                  <div>
                    <span class="title">参考</span>
                    <span v-if="data.xiaoErGuanSha">{{ data.xiaoErGuanSha.join('，') }}</span>
                  </div>
                </div>
              </div>

            </div>

          </div>

        </div>
      </div>

    </div>
  </div>
</template>


<style scoped lang="scss" src="@/css/paipan/bazi.scss"></style>
